var mask = document.querySelector('.mask'),
    sure_btn = document.getElementById('sure'),
    cancel_btn = document.getElementById('cancel'),
    in_search = document.getElementById('in_search'),
    sach_btn = document.getElementById('sach_btn'),
    in_company = document.getElementById('in_company'),
    in_job = document.getElementById('in_job'),
    in_salary = document.getElementById('in_salary'),
    smit_btn = document.getElementById('smit_btn'),
    delAll_btn = document.getElementById('delAll_btn'),
    lineColor_btn = document.getElementById('lineColor_btn'),
    tbody = document.querySelector('tbody'),
    icompanys = document.getElementsByClassName('icompany'),
    ijobs = document.getElementsByClassName('ijob'),
    isalarys = document.getElementsByClassName('isalary'),
    arrz = [];

window.onload = function() {
    arrz = localStorage.arrs ? JSON.parse(localStorage.arrs) : [];
    display();
}

function display() {
    var str = '',
        str_s = '';
    if (arrz.length == 1) {
        str = `<tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>
                        ${1}
                    </td>
                    <td>
                        <span>${arrz[0].company}</span>
                        <input class="icompany" type="text">
                    </td>
                    <td>
                        <span>${arrz[0].job}</span>
                        <input class="ijob" type="text">
                    </td>
                    <td>
                        <span>${arrz[0].salary}</span>
                        <input class="isalary" type="number">
                    </td>
                    <td>
                        <button disabled onclick="up(${arrz[0].id})" type="button">上移</button>
                        <button onclick="del(${arrz[0].id})" type="button">删除</button>
                        <button onclick="updata(${1},this)" type="button">修改</button>
                        <button disabled onclick="down(${arrz[0].id})" type="button">下移</button>
                    </td>
                </tr>`;
    } else {
        for (var i = 0; i < arrz.length; i++) {
            if (i == 0) {
                str_s = `<tr>
                <td>
                    <input type="checkbox">
                </td>
                    <td>
                        ${i+1}
                    </td>
                    <td>
                        <span>${arrz[i].company}</span>
                        <input class="icompany" type="text">
                    </td>
                    <td>
                        <span>${arrz[i].job}</span>
                        <input class="ijob" type="text">
                    </td>
                    <td>
                        <span>${arrz[i].salary}</span>
                        <input class="isalary" type="number">
                    </td>
                    <td>
                        <button disabled onclick="up(${arrz[i].id})" type="button">上移</button>
                        <button onclick="del(${arrz[i].id})" type="button">删除</button>
                        <button onclick="updata(${i},this)" type="button">修改</button>
                        <button onclick="down(${arrz[i].id})" type="button">下移</button>
                    </td>
                </tr>`;
            } else if (i == arrz.length - 1) {
                str_s = `<tr>
                <td>
                        <input type="checkbox">
                    </td>
                    <td>
                        ${i+1}
                    </td>
                    <td>
                        <span>${arrz[i].company}</span>
                        <input class="icompany" type="text">
                    </td>
                    <td>
                        <span>${arrz[i].job}</span>
                        <input class="ijob" type="text">
                    </td>
                    <td>
                        <span>${arrz[i].salary}</span>
                        <input class="isalary" type="number">
                    </td>
                    <td>
                        <button onclick="up(${arrz[i].id})" type="button">上移</button>
                        <button onclick="del(${arrz[i].id})" type="button">删除</button>
                        <button onclick="updata(${i},this)" type="button">修改</button>
                        <button disabled onclick="down(${arrz[i].id})" type="button">下移</button>
                    </td>
                </tr>`;
            } else {
                str_s = `<tr>
                <td>
                        <input type="checkbox">
                    </td>
                    <td>
                        ${i+1}
                    </td>
                    <td>
                        <span>${arrz[i].company}</span>
                        <input class="icompany" type="text">
                    </td>
                    <td>
                        <span>${arrz[i].job}</span>
                        <input class="ijob" type="text">
                    </td>
                    <td>
                        <span>${arrz[i].salary}</span>
                        <input class="isalary" type="number">
                    </td>
                    <td>
                        <button onclick="up(${arrz[i].id})" type="button">上移</button>
                        <button onclick="del(${arrz[i].id})" type="button">删除</button>
                        <button onclick="updata(${i},this)" type="button">修改</button>
                        <button onclick="down(${arrz[i].id})" type="button">下移</button>
                    </td>
                </tr>`;
            }
            str += str_s;
        }

    }
    tbody.innerHTML = str;
}

function up(id) {
    for (var i = 0; i < arrz.length; i++) {
        if (id == arrz[i].id) {
            if (i != 0) {
                arrz.splice(i - 1, 0, arrz.splice(i, 1)[0]);
                break;
            } else if (i == 0) {
                alert('不能上移');
                break;
            }
        }
    }
    localStorage.arrs = JSON.stringify(arrz);
    display();
}

function down(id) {
    for (var i = 0; i < arrz.length; i++) {
        if (id == arrz[i].id) {
            if (i != arrz.length - 1) {
                arrz.splice(i + 1, 0, arrz.splice(i, 1)[0]);
                break;
            } else if (i == arrz.length - 1) {
                alert('不能下移');
                break;
            }
        }
    }
    localStorage.arrs = JSON.stringify(arrz);
    display();
}


function del(id) {
    mask.style.display = 'block';
    sure_btn.onclick = function() {
        mask.style.display = '';
        for (var i = 0; i < arrz.length; i++) {
            if (arrz[i].id == id) {
                arrz.splice(i, 1);
            }
        }
        localStorage.arrs = JSON.stringify(arrz);
        display();
    }
    cancel_btn.onclick = function() {
        mask.style.display = '';
    }
}